<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Crystalcoin</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
    <div class="container" style="width: 100%;">
        <h4>Crystalcoin chat room,Have fun!</h4>
        <div id="content" style="overflow: scroll;">
        </div>
    </div>
    <div style="width: 100%;height: 34px; position: fixed;bottom: 0px;">
        <input class="form-control" type="text" id="question" placeholder="say something"></input>
    </div>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {

        $('#content').css('height', window.screen.height - 75);
        $('#question').keydown(function(event) {
            if (event.keyCode == 13) {
                var question = $('#question').val();
                if (question !== null && question !== undefined && question !== '') {
                    $.get("/question/" + question, function(data) {
                        // alert(data);
                        var answer = data.answer;
                        $('#content').append('<p>'+ data.address + ':' + data.topic + '</p>');
                        var el = document.getElementById("content");
                        el.scrollTop = el.scrollHeight;
                        $('#question').val('');
                    });
                }
            }
        });
    });
    </script>
</body>

</html>
